<template>

  <el-container>
    <el-aside width="200px"></el-aside>
    <el-container>
     <!-- <el-header>Header</el-header>-->



      <el-main>
<!--轮播图-->
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="url in 4" :key="url">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
            <h3>{{ url }}</h3>
          </el-carousel-item>
        </el-carousel>
        <br>
 <!--面包屑-->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item><a href="/"><i class="el-icon-s-help"></i>热门推荐</a></el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">华语</a></el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">流行</a></el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">摇滚</a></el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">民谣</a></el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">电子</a></el-breadcrumb-item>
          <div class="bb">
            <el-link style="float: right;">更多<i class="el-icon-right"></i> </el-link>
          </div>
        </el-breadcrumb>
        <hr/>

      <!--歌单-->

        <el-row style="height: 320px">
          <el-col  :span="4" v-for="(o, index) in 4" :key="o" :offset="index > 0 ? 2 : 0">
          <el-card :body-style="{ padding: '0px'}">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
            <div style="padding: 14px;">
              <span><a href="/">2020年MTVEMA音乐大奖提名名单</a></span>
              <div class="bottom clearfix">
                <!--<time class="time">{{ currentDate }}</time>-->

              </div>
            </div>
          </el-card>
        </el-col>

        </el-row>

        <el-row style="height: 320px">
          <el-col  :span="4" v-for="(o, index) in 4" :key="o" :offset="index > 0 ? 2 : 0">
            <el-card :body-style="{ padding: '0px' }">
              <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
              <div style="padding: 14px;">
                <span><a href="/">你好</a></span>
                <div class="bottom clearfix">
                  <!--<time class="time">{{ currentDate }}</time>-->

                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!--新碟上架-->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item><a href="/"><i class="el-icon-s-help"></i>新碟上架</a></el-breadcrumb-item>

          <div class="bb">
            <el-link style="float: right;">更多<i class="el-icon-right"></i> </el-link>
          </div>
        </el-breadcrumb>
        <hr/>


          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="item in 2" :key="item">
              <el-row style="height: 160px">
                <el-col  :span="3" v-for="(o, index) in 5" :key="o" :offset="index > 0 ? 2 : 0">
                  <el-card :body-style="{ padding: '0px'}">
                    <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                    <div style="padding: 14px;">
                      <span><a href="/">222</a></span>
                    </div>
                  </el-card>
                </el-col>

              </el-row>
              <h3>{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        <!--榜单-->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item><a href="/"><i class="el-icon-s-help"></i>榜单</a></el-breadcrumb-item>

          <div class="bb">
            <el-link style="float: right;">更多<i class="el-icon-right"></i> </el-link>
          </div>
        </el-breadcrumb>
        <hr/>

        <el-row class="tac">
          <el-col :span="12">
            <h5>云音乐飙升榜</h5>
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose">

              <el-menu-item index="2">
                <i class="el-icon-service">1</i>
                <span slot="title"><a>放肆&nbsp;&nbsp;&nbsp;&nbsp;<audio  style="width: 250px" src="http://qhzc8uz64.hd-bkt.clouddn.com/%E8%BE%BE%E6%8B%89%E5%B4%A9%E5%90%A7%EF%BC%88Cover%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C%EF%BC%89.mp3" controls></audio></a></span>

              </el-menu-item>

              <el-menu-item index="4">
                <i class="el-icon-service">2</i>
                <span slot="title"><a href="/">理由&nbsp;&nbsp;&nbsp;&nbsp;<audio  style="width: 250px" src="http://qhzc8uz64.hd-bkt.clouddn.com/%E8%BE%BE%E6%8B%89%E5%B4%A9%E5%90%A7%EF%BC%88Cover%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C%EF%BC%89.mp3" controls></audio></a></span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-service">3</i>
                <span slot="title"><a href="/">倒带&nbsp;&nbsp;&nbsp;&nbsp;<audio  style="width: 250px" src="http://qhzc8uz64.hd-bkt.clouddn.com/%E8%BE%BE%E6%8B%89%E5%B4%A9%E5%90%A7%EF%BC%88Cover%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C%EF%BC%89.mp3" controls></audio></a></span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-service">4</i>
                <span slot="title"><a href="/">倒带&nbsp;&nbsp;&nbsp;&nbsp;<audio  style="width: 250px" src="http://qhzc8uz64.hd-bkt.clouddn.com/%E8%BE%BE%E6%8B%89%E5%B4%A9%E5%90%A7%EF%BC%88Cover%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C%EF%BC%89.mp3" controls></audio></a></span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-service">5</i>
                <span slot="title"><a href="/">倒带&nbsp;&nbsp;&nbsp;&nbsp;<audio  style="width: 250px" src="http://qhzc8uz64.hd-bkt.clouddn.com/%E8%BE%BE%E6%8B%89%E5%B4%A9%E5%90%A7%EF%BC%88Cover%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C%EF%BC%89.mp3" controls></audio></a></span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-service">6</i>
                <span slot="title"><a href="/">倒带&nbsp;&nbsp;&nbsp;&nbsp;<audio  style="width: 250px" src="http://qhzc8uz64.hd-bkt.clouddn.com/%E8%BE%BE%E6%8B%89%E5%B4%A9%E5%90%A7%EF%BC%88Cover%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C%EF%BC%89.mp3" controls></audio></a></span>
              </el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="12">



          </el-col>

          <el-col :span="12">
            <h5>云音乐新歌榜</h5>
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose">

              <el-menu-item index="2">
                <i class="el-icon-service">1</i>
                <span slot="title"><a href="/">孤独&nbsp;&nbsp;&nbsp;&nbsp;<audio  style="width: 250px" src="http://qhzc8uz64.hd-bkt.clouddn.com/%E8%BE%BE%E6%8B%89%E5%B4%A9%E5%90%A7%EF%BC%88Cover%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C%EF%BC%89.mp3" controls></audio></a></span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-service">2</i>
                <span slot="title"><a href="/">理由&nbsp;&nbsp;&nbsp;&nbsp;<audio  style="width: 250px" src="http://qhzc8uz64.hd-bkt.clouddn.com/%E8%BE%BE%E6%8B%89%E5%B4%A9%E5%90%A7%EF%BC%88Cover%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C%EF%BC%89.mp3" controls></audio></a></span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-service">3</i>
                <span slot="title"><a href="/">放肆&nbsp;&nbsp;&nbsp;&nbsp;<audio  style="width: 250px" src="http://qhzc8uz64.hd-bkt.clouddn.com/%E8%BE%BE%E6%8B%89%E5%B4%A9%E5%90%A7%EF%BC%88Cover%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C%EF%BC%89.mp3" controls></audio></a></span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-service">4</i>
                <span slot="title"><a href="/">放肆&nbsp;&nbsp;&nbsp;&nbsp;<audio  style="width: 250px" src="http://qhzc8uz64.hd-bkt.clouddn.com/%E8%BE%BE%E6%8B%89%E5%B4%A9%E5%90%A7%EF%BC%88Cover%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C%EF%BC%89.mp3" controls></audio></a></span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-service">5</i>
                <span slot="title"><a href="/">得意&nbsp;&nbsp;&nbsp;&nbsp;<audio  style="width: 250px" src="http://qhzc8uz64.hd-bkt.clouddn.com/%E8%BE%BE%E6%8B%89%E5%B4%A9%E5%90%A7%EF%BC%88Cover%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C%EF%BC%89.mp3" controls></audio></a></span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-service">6</i>
                <span slot="title"><a href="/">倒带&nbsp;&nbsp;&nbsp;&nbsp;<audio  style="width: 250px" src="http://qhzc8uz64.hd-bkt.clouddn.com/%E8%BE%BE%E6%8B%89%E5%B4%A9%E5%90%A7%EF%BC%88Cover%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C%EF%BC%89.mp3" controls></audio></a></span>
              </el-menu-item>
            </el-menu>



          </el-col>
        </el-row>

      </el-main>



      <el-footer>Footer</el-footer>



    </el-container>
    <el-aside width="200px"></el-aside>
  </el-container>

  <!--新碟上架-->


</template>

<script>
/*轮播图*/
export default {
  data(){
    return{
      images:[

      ]
    }
  }
}

</script>

<style>



  /*框架*/
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
   /* line-height: 160px;*/
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  /*轮播图*/
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
/*更多*/
  .bb{

  }

  /*歌单图片*/
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
  .el-col-4 {
    width: 18.66667%;

  }
/*榜单*/
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }

</style>
